<template>
  <a-form @submit="handleSubmit" :form="form" class="form">
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="商品名称">
          <a-input
            placeholder="请输入商品名称"
            v-decorator="['name', { rules: [{ required: true, message: '请输入商品名称', whitespace: true }] }]"
          />
          <a-input
            v-show="false"
            placeholder="请输入店铺名称"
            v-decorator="['categoryName', { rules: [{ required: true, message: '请输入店铺名称', whitespace: true }] }]"
          />
          <a-input
            v-show="false"
            placeholder="商品id"
            v-decorator="['id', { rules: [{ required: true, message: '商品id', whitespace: true }] }]"
          />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="店铺名称">
          <a-select
            showSearch
            :defaultActiveFirstOption="false"
            :showArrow="false"
            :filterOption="false"
            placeholder="指定店铺"
            @search="getShopSearch"
            @change="getShopListChange"
            notFoundContent="null"
            v-decorator="['shopId', { rules: [{ required: true, message: '请输入店铺名称', whitespace: true }] }]"
          >
            <a-select-option v-for="d in shopList" :key="d.id">{{ d.shopName }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="商品描述">
          <a-input
            placeholder="请输入商品描述"
            v-decorator="['description', { rules: [{ required: true, message: '请输入商品描述', whitespace: true }] }]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <!-- <a-row class="form-row" :gutter="16">
        </a-row> -->
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="商品类型">
          <a-select
            showSearch
            :defaultActiveFirstOption="false"
            :showArrow="false"
            :filterOption="false"
            placeholder="指定商品类型"
            notFoundContent="null"
            @change="handlerShopTypeChange"
            @click="getGoodsShopListByShopId"
            v-decorator="['categoryId', { rules: [{ required: true, message: '请指定商品类型名' }] }]"
          >
            <a-select-opt-group v-for="item in goodTypeList" :key="item.id">
              <span slot="label">
                <a-icon type="user" />
                {{ item.name }}
              </span>
              <a-select-option :key="n.id" v-for="n in item.children">{{ n.name }}</a-select-option>
            </a-select-opt-group>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="原价（元）">
          <a-input-number
            placeholder="请输入原价"
            v-decorator="['price', {  initialValue:'0' },{ rules: [{ required: true, message: '请输入原价' }] }]"
            style="width:100%"
          />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="现价（元）">
          <a-input-number
            placeholder="请输入现价"
            v-decorator="['presentPrice',{  initialValue:'0' }, { rules: [{ required: true, message: '请输入现价' }]}]"
            style="width:100%"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item label="商品图片">
      <a-upload
        action="/mall-serve/v1/sys/common/uploadImage"
        name="file"
        listType="picture-card"
        :fileList="picList"
        @preview="handlePicPreview"
        :remove="handlePicRemove"
        @change="handlePicChange"
        :showUploadList="true"
        v-decorator="['picUrls', { rules: [{ required: true, message: '请指定商品图片' }] }]"
      >
        <div v-if="picList.length < 30">
          <a-icon type="plus" />
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handlePicCancel">
        <img alt="example" :src="previewImage" />
      </a-modal>
    </a-form-item>
    <a-form-item v-if="showSubmit">
      <a-button htmlType="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import moment from 'dayjs'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'SpuInfoFom',
  props: {
    fuspudata: {},
    showSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      shopList: [],
      picList: [],
      uploadPicList: [],
      previewVisible: false,
      previewImage: '',
      imageDownloadUri: '/mall-serve/v1/sys/common/getImageByUri?imageUri=',
      categoryName: '',
      goodTypeList: [],
      showFixDateType: false,
      showVaildDateType: false,
      vaildlFixe: false,
      validStartTime: false
    }
  },
  created() {
    this.getShopSearch()
    this.getGoodsShopListByShopId()
  },
  mounted() {},
  activated() {
    this.uploadPicList = []
  },

  methods: {
    handlePicPreview(file) {
      console.log(file)
      if (this.isEdit) {
        this.previewImage = file.thumbUrl
        this.previewVisible = true
      } else {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      }
    },
    handlePicCancel() {
      console.log('handlePicCancel')
      this.previewVisible = false
    },
    handlePicRemove(file) {
      console.log(this.uploadPicList)

      let name
      if (file.response != undefined && file.response.result != undefined) {
        name = file.response.result.imageUri
      } else {
        name = file.name
      }
      for (let a in this.uploadPicList) {
        if (this.uploadPicList[a] == name) {
          this.uploadPicList.splice(a, 1)
        }
      }
      console.log(this.uploadPicList)
    },
    handlePicChange(res) {
      this.picList = res.fileList
      if (res.file.status == 'done') {
        this.uploadPicList.push(res.file.response.result.imageUri)
      }
    },
    handlerShopTypeChange(value) {
      let list = this.goodTypeList
      for (let i in list) {
        let temp = list[i]
        if (temp.children != null) {
          for (let j in temp.children) {
            if (temp.children[j].id == value) {
              this.categoryName = temp.children[j].name
              this.$nextTick(() => {
                this.form.setFieldsValue({ categoryName: this.categoryName })
              })
            }
          }
        }
      }
    },
    //获取商铺可添加的商品类型
    getGoodsShopListByShopId() {
      console.log('开始进行查询商店操作')
      getAction('/shopType/getGoodsTypeList')
        .then(res => {
          if (res.success) {
            this.goodTypeList = res.result
          }
        })
        .catch(err => {})
    },
    getGoodTypeChange(value) {
      this.selectedGoodType = value
    },
    //获取商铺可添加的商铺id
    getShopListChange(value) {
      console.log('====' + value)
    },
    getShopSearch(value) {
      // if (value.length > 3) {
      let params = { shopName: '*' }
      getAction('/shop/web/shopList', params).then(res => {
        if (res.success) {
          this.shopList = res.result.records
        }
        if (res.code === 500) {
          this.$message.warning(res.message)
        }
      })
      // }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$notification['error']({
            message: 'Received values of form:',
            description: values
          })
        }
      })
    },
    checkValidEndTime(rules, values, callback) {
      if (
        this.form.getFieldValue('couponTemplate.validEndTime') <
        this.form.getFieldValue('couponTemplate.validStartTime')
      ) {
        callback('生效结束时间不能小于生效开始时间')
      }
    },

    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day')
    },
    changeDateType(value) {
      if (value == 1) {
        ;(this.showVaildDateType = true), (this.showFixDateType = false)
        ;(this.validStartTime = true), (this.vaildlFixe = false)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.validStartTime'], { force: true })
          this.form.validateFields(['couponTemplate.validEndTime'], { force: true })
          this.form.validateFields(['couponTemplate.fixedBeginTerm'], { force: true })
          this.form.validateFields(['couponTemplate.fixedEndTerm'], { force: true })
        })
      }
      if (value == 2) {
        ;(this.showVaildDateType = false), (this.showFixDateType = true)
        ;(this.validStartTime = false), (this.vaildlFixe = true)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.validStartTime'], { force: true })
          this.form.validateFields(['couponTemplate.validEndTime'], { force: true })
          this.form.validateFields(['couponTemplate.fixedBeginTerm'], { force: true })
          this.form.validateFields(['couponTemplate.fixedEndTerm'], { force: true })
        })
      }
    }
  }
}
</script>

<style scoped></style>
